class Blog {
  mixin = {
    data() {
      return {
        navIndex: 0,
        blogTree: [], //博客栏目
        blogList: [], //博客列表
        loading: true
      }
    },
    head() {
      return {
        title: "missyeah blog",
        meta: [
          {
            hid: "keywords",
            name: "keywords",
            content:  'missyeah',
          },
          {
            hid: "description",
            name: "description",
            content:  'missyeah',
          },
        ],
        link: [{
          rel: "canonical",
          href: this.canonical || 'https://www.missyeah.com',
        }],
      }
    },
    async asyncData(that) {
      let canonical = "https://www.missyeah.com" + that.route.fullPath;
      let column_id = that.route.query.column_id == undefined ? "" : that.route.query.column_id; //博客栏目id
      let offset = that.route.query.offset == undefined ? 1 : that.route.query.offset; //博客栏目id
      let resBlogTree = {},
        resBlogList = {};
      let blogTree = [{
          id: "",
          name: "ALL"
        }],
        blogList = []; //博客栏目
      let blogForm = {
        page: offset,
        page_size: 20,
        column_id: column_id,
      }
      try {
        [
          resBlogTree,
          resBlogList,
        ] = await Promise.all([
          //博客栏目
          that.store.dispatch("blog/blogTree", {
            page: 1,
            page_size: 100,
            parent_id: 1
          }),
          //博客列表
          that.store.dispatch("blog/blogList", blogForm),
        ]);
      } catch (err) {
        console.log(err);
      }
      if (resBlogTree.data != undefined) {
        blogTree = blogTree.concat(resBlogTree.data.list);
      }
      if (resBlogList.data != undefined) {
        blogList = resBlogList.data.list;
      }
      return {
        blogTree,
        blogList,
        blogForm,
        resBlogList,
        proTotal: resBlogList.data == undefined ? 0 : resBlogList.data.paginatio.total,
        canonical
      }
    },
    mounted() {
      let column_id = this.$route.query.column_id == undefined ? "" : this.$route.query.column_id; //博客栏目id
      this.loading = false;
      for (let i = 0; i < this.blogTree.length; i++) {
        if (this.blogTree[i].id == column_id) {
          this.$nextTick(() => {
            this.navIndex = i;
          })
        }
      }
    },
    methods: {
      //切换栏目
      clickTab(index) {
        this.$router.push({
          path: "/blog",
          query: {
            column_id: this.blogTree[index].id,
            offset: 1,
          }
        })
        this.blogList = [];
        this.loading = true;
        this.blogForm.page = 1;
        this.blogForm.column_id = this.blogTree[index].id;
        this.getBlogList();
      },
      //列表换页
      pageChange(index) {
        let column_id = this.$route.query.column_id == undefined ? "" : this.$route.query.column_id; //博客栏目id
        this.$router.push({
          path: "/blog",
          query: {
            column_id: column_id,
            offset: index,
          }
        });
        this.blogList = [];
        this.loading = true;
        this.blogForm.page = index;
        this.blogForm.column_id = column_id;
        this.getBlogList();
      },
      //获取博客列表
      async getBlogList() {
        let res = await this.$store.dispatch("blog/blogList", this.blogForm);
        if (res.code == 0 && res.data != undefined) {
          this.blogList = res.data.list;
          this.proTotal = res.data.paginatio.total;
        }
        this.loading = false;
      },
    }
  }
}
export default new Blog();
